<template>
  <div id="Login">
    <div class="login_box">
      <div class="item login_left">
        <el-image class="login_left_img" :src="src" fit="contain" />
      </div>
      <div class="item login_right">
        <el-row>
          <el-button type="primary" size="small" round plain @click="GoToReception">进入前台</el-button>
          <el-button type="primary" size="small" round plain @click="GoToBackstage">进入后台</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      src: require('../assets/images/login/login_left.png')
    }
  },
  /* HTML DOM加载后马上执行的，如赋值 */
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 进入前台
    GoToReception() {
      console.log('进入前台')
      this.$router.push('/frontDesk')
    },
    // 进入后台
    GoToBackstage() {
      console.log('进入后台')
      this.$router.push('/backstage')
    }
  }
}
</script>

<style lang='scss' scoped>
  #Login {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/images/login/login_bg.png');
    background-size: 100% 100%;
    height: 100%;
    // background-size: cover;
    overflow: hidden;
    .login_box{
      width: 680px;
      height: 400px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      /* 利用css动画使白框居中https://zhuanlan.zhihu.com/p/124706630 */
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      .item{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .login_left{
        width: 45%;
        .login_left_img{
          height: 100%;
          width: 100%
        }
      }
      .login_right{
        width: 55%;
      }
    }
  }
</style>
